<template>
	<div id="app">

		<div class="no_content" v-if="is_null">
			<icon name="no_content" scale="15"></icon>
		</div>

		<!-- 卡片的所有值都需要循环出来 -->

		<div v-if="is_content">
			<v-card class="mx-auto" width="100%" style="margin-top: 1%;" outlined v-for="(house,i) in house_list" :key="i">
				<v-card-actions>
					<div style="color: #747577;width: 100%;"><span style="float: left;">看房时间：{{house.see_date}} </span>
					<span style="float: right;color:#FF5252;" v-if="house.status=='WAIT_PAYMENT'">待付款</span>
					<span style="float: right;color:#FF5252;" v-if="house.status=='WAIT_COMMENT'">待评价</span>
					<span style="float: right;color:#FF5252;" v-if="house.status=='COMPLETE'">已完成</span>
					<span style="float: right;color:#FF5252;" v-if="house.status=='CANCELED'">已取消</span>
					<span style="float: right;color:#FF5252;" v-if="house.status=='PAID'">已支付</span>
					</div>
				</v-card-actions>
				<v-divider></v-divider>
				<v-list-item three-line @click="goHouseDel(house.house_id)">
					<v-list-item-avatar tile size="100" width="130" class="image_border_list"><img :src="house.house.index_image_url"
							alt="未加载" />
					</v-list-item-avatar>
					<v-list-item-content>
						<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{house.house.title}}</span></v-list-item-title>
						<v-list-item-subtitle><span>{{house.house.area_name}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house.house.lease_type}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house.house.acreage}}m²</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house.house.renovation}}</span></v-list-item-subtitle>
						<div class="overline" style="color:#FF5252">{{house.house.month_price}}元/月</div>
					</v-list-item-content>

				</v-list-item>
				<v-divider></v-divider>
				<!-- 如果刚订单的状态为已支付，则修改房屋状态判断是否已经出租 -->
				<v-card-actions style="float: right; height: 4vh;">
					<div style="margin-right: 5% ;" v-if="house.status=='WAIT_PAYMENT'">
						<v-btn outlined style="color:gainsboro;height: inherit;" @click="cancel_order(house.order_id)">取消订单</v-btn>
					</div>
					<div style="margin-right: 5% ;" v-if="house.status=='WAIT_PAYMENT'">
						<v-btn outlined style="color:red;height: inherit;" @click="pay_monay(house.order_id)">付款</v-btn>
					</div>
					<!-- 评价采用弹窗的方式 -->
					<div style="margin-right: 5% ;" v-if="house.status=='WAIT_COMMENT'">
						<v-btn outlined style="color:red;height: inherit;" @click=" goComment(house.order_id)">评价</v-btn>
					</div>
					<div style="margin-right: 5% ;" v-if="house.status=='COMPLETE'">
						<v-btn outlined style="color:red;height: inherit;">已完成</v-btn>
					</div>
					<div style="margin-right: 5% ;" v-if="house.status=='CANCELED'">
						<v-btn outlined style="color:red;height: inherit;">已取消</v-btn>
					</div>
				</v-card-actions>
				<div class="clearfloat"></div>
			</v-card>
			<div style="padding-top: 1vh;"></div>
		</div>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
		
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "AllOrder",
		data() {
			return {
				house_list: [],
				is_content: false,
				is_null: false,
				snackbar:false,
				timeout:1000,
				message:''
			}
		},
		methods: {
			pay_monay(order_id) {
				this.$router.push({
					name: "支付订单",
					params:{order_id:order_id}
				})
			},
			goHouseDel(house_id) {
				// localStorage.setItem('data', id);
				this.$router.push({
					name: "房屋详情",
					query:{house_id:house_id}
				});
			},
			goComment(order_id){
				this.$router.push({
					name: "评论订单",
					params:{order_id:order_id}
				});
			},
			cancel_order(order_id){
				let _this = this;
				axios
					.get("/api/v1.0/order/cancel_order",{
						params:{
							order_id:order_id
						}
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.snackbar = true;
							_this.message = response.data.errmsg;
							_this.$router.go()
						} else if (response.data.errno == '4101') {
							// 未登跳转到登录页面
							setTimeout(function() {
								_this.message=response.data.errmsg;
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						} else {
							console.log(response.data.data)
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			}
		},
		mounted() {
			let _this = this;
			axios
				.get("/api/v1.0/order/get_house_order")
				.then(function(response) {
					if (response.data.errno == '0') {
						_this.house_list = response.data.data;
						console.log(response.data.data)
						// 判断是否已经认证
						if (_this.house_list.length == 0) {
							_this.is_null = true;
						} else {
							_this.is_content = true;
						}
					} else if (response.data.errno == '4101') {
						// 未登跳转到登录页面
						setTimeout(function() {
							_this.$router.replace({
								path: "/login"
							});
						}, 1000);
					} else {
						console.log(response.data.data)
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
		// ,
		// beforeRouteLeave(to, from, next) {
		// 	if(to.path == "/main/mine"){
		// 		from.meta.keepAlive = false;
		// 	}else{
		// 		from.meta.keepAlive = true;
		// 	}
		// 	next();
		// }
		// },
		// beforeRouteLeave(to, from, next) {
		// 	if (to.path == "/mine/house_order") {
		// 		to.meta.keepAlive = true;
		// 	} else {
		// 		to.meta.keepAlive = false;
		// 	}
		// 	next();
		// }
		// ,
		// beforeRouteLeave(to, from, next) {
		// 	if(to.path=="/main/mine" || to.path=="/housing_detail")
		// 	{
		// 		from.meta.keepAlive = false;
		// 	}
		// 	next();
		// }
	}
</script>

<style scoped>
</style>
